<template>
    <div v-show="dialogValue" class="add-form f-c">
      <div class="header">
        <div class="title">
          添加下级部门
        </div>
        <el-button @click="onPageBack">返回</el-button>
      </div>
      <div class="add-form-content f-g">
        <SubmitForm
          :rule-form="ruleForm"
          :rules="rules"
          :form-list="formList"
          @close="onPageBack"
          @save="onSave"
        />
      </div>
    </div>
  </template>
  
  <script>
  import { http } from '@/api'
  export default {
    name: 'FormAdd',
    data() {
      return {
        dialogValue: false,
        ruleForm: {
        },
        rules: {
          departName: [{ required: true, message: '不能为空' }],
          code: [{ required: true, message: '不能为空' }]
        },
        formList: [
          {
            key: 'departName',
            name: 'input',
            label: '部门名称',
            colSpan: 12
          },
          {
            key: 'leaderPerson',
            name: 'input',
            label: '负责人',
            colSpan: 12
          },
          {
            key: 'leaderPhone',
            name: 'input',
            label: '负责人联系方式',
            colSpan: 12
          }
        ]
      }
    },
    created() {
  
    },
    methods: {
      getForm() {
        const form = {
          id: undefined
        }
        this.formList.forEach(el => {
          form[el.key] = ''
        })
        return form
      },
      async open(item) {
        this.ruleForm = this.getForm()
        this.ruleForm.id = item.id
        this.dialogValue = true
      },
      onPageBack() {
        this.$emit('get-page')
        this.dialogValue = false
      },
      onSave() {
        http.dept.createch({ ...this.ruleForm }).then(res => {
          this.$message.success(res.msg)
          this.onPageBack()
        })
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  </style>
  